<!DOCTYPE html>
<html>
  <head>
    <title>Cast Control</title>
    <!-- Our style sheet -->
    <link rel="stylesheet" type="text/css" href="style.css">
    <!-- Google Sender API for Chrome -->
    <script type="text/javascript" 
	    src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js">
    </script>
    <!-- Our API -->
    <script type="text/javascript" src="CastControl.js"></script>
  </head>
  <body class="ctrl">
    <!-- All is in table -->
    <table id="main" class="control">
      <tr>
	<!-- Play/Pause button -->
        <td class="button">
	  <button id="play"></button>
	  <button id="pause"></button>
	</td>
	<!-- Current time/duration - if enabled -->
	<td class="time" id="current" title="Now">-:--</td>
	<td class="time" id="duration" title="Total">0:00</td>
	<!-- Seek-bar - if enabled -->
	<td>
	  <div class="topbar" id="seekBar">
	    <progress id="seekBg" value="0" min="0" max="100"></progress>
	    <input id="seek" type="range" value="0" min="0" max="100" step="1">
	  </div>
	</td>
	<!-- Toggle Audio on/off -->
	<td class="button">
	  <button id="audioOn" title="Audio"></button>
	  <button id="audioOff" title="Muted"></button>
	</td>
	<!-- Volume control -->
	<td id="volumeCell">
	  <div class="bar" id="audioBar" title="Volume">
	    <progress id="audioBg" value="50" max="100"></progress>
	    <input id="audio" type="range" value="50" 
		   min="1"  max="100" step="1">
	  </div>
	</td>  
	<!-- Quality selector -->
	<td id="rateCell">
	  <select id="rate" title="Quality">
	    <option value="high"  > High</option>
	    <option value="medium"> Medium</option>
	    <option value="low"   > Low</option>
	  </select>
	</td>
	<!-- ChromeCast button -->
	<td class="button">
	  <button class="cast" id="active"></button>
	  <button class="cast" id="idle"></button>
	  <button class="cast" id="error"></button>
	  <button class="cast" id="warning"></button>
	  <button class="cast" id="unknown"></button>
	</td>
      </tr>
      <!-- State display -->
      <tr>
	<td colspan="3" id="state">Unknown</td>
	<td colspan="5" id="file">No media</td>
      </tr>
    </table>
    <script type="text/javascript">
      var CastControl = new CastControl();
    </script>
  </body>
</html>
<!-- EOF -->
